<template>
    <div>
        <div class="top-img">
            <img style="width: 100%" src="https://img.js.design/assets/img/617766b867e5da8dd2a409b5.png" alt="">
        </div>
        <div class="bottom-content">
<!--            {{profileList}}-->
            <el-row justify="space-between">
                <el-col :span="8">
                    <el-card>
                        <div class="person" v-if="person">
                            <p v-if="person.user">学员ID：{{person.user.username}}</p>
                            <p v-if="person.name">姓名：{{person.name}}</p>
                            <p v-if="person.phone">手机号码：{{person.phone}}</p>
                            <p v-if="person.card_type_display">证件类型：{{person.card_type_display}}</p>
                            <p v-if="person.card_id">身份证号：{{`${person.card_id.substr(0,4)}****${person.card_id.substr(person.card_id.length-4,4)}`}}</p>
                            <p v-if="person.province">所在地区：{{`${person.province}/${person.city}/${person.region}`}}</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="15">
                    <el-row>
                       <el-col>
                           <el-card class="noticeList">
                               <template #header>
                                   <div class="card-header">
                                       <span>最新公告</span>
<!--                                       <el-button class="button" text>Operation button</el-button>-->
                                   </div>
                               </template>
                               <div v-for="item in noticeList" :key="item.id" class="notice" @click="lookNotice(item.id)">
                                   <span>{{item.title}}</span>
                                   <span>{{item.add_time.substr(0,10)}}</span>
                               </div>
                               <el-dialog
                                       v-model="dialogLookNotice"
                                       :title="currentNotice.title"
                                       width="30%"
                                       :before-close="lookNoticeClose">
                                    <div v-html="currentNotice.text"></div>
                                   <div class="notice_addtime">
                                       <span>{{currentNotice.add_time.substr(0,10)}}</span>
                                   </div>
                                   <template #footer>
                                      <span class="dialog-footer">
                                        <el-button type="primary" @click="dialogLookNotice = false">确认</el-button>
                                      </span>
                                   </template>
                               </el-dialog>
                           </el-card>
                       </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-card>
                                <div class="profile-title">
                                    <span>报名记录</span>
                                    <div><el-button size="small" @click="toRegister">新建报名</el-button></div>
                                </div>
                                <div class="profile" v-for="item in profileList">
                                    <div>
                                        <div class="header">
                                            <div class="top">
                                                <div class="course">{{item.course.name}}</div>
                                                <el-button size="small" @click="toUpdate(item)">编辑</el-button>
                                            </div>
                                            <div>审核状态：{{state_map[item.state_code]}}</div>
                                        </div>
                                        <div>
                                            <div>报名机构：{{item.org.org_name}}</div>
                                            <div v-if="item.train_account">学习账号：{{item.train_account}}</div>
                                            <div v-if="item.train_password">学习密码：{{item.train_password}}</div>
                                            <div v-if="item.active_days">账号期限：{{item.active_days}}</div>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {reactive,toRefs,onMounted} from 'vue'
    import {noticeList, getprofileList} from "../../request/api";
    import {useRouter} from "vue-router";
    export default {
        name: "index",
        setup(){
            let data = reactive({
                person:{},
                profileList:[],
                noticeList:[],
                dialogLookNotice:false,
                currentNotice:{},
                state_map: {
                    0: "机构一审驳回",
                    1: "机构一审待审",
                    2: "总部一审驳回",
                    3: "总部一审待审",
                    4: "机构二审驳回",
                    5: "机构二审待审",
                    6: "总部二审驳回",
                    7: "总部二审待审",
                    8: "全部审核通过",
                }, //审核状态字典
            })
            let router = useRouter();
            let ReverseRankingDate = (data, p) => {
                for (let i = 0; i < data.length - 1; i++) {
                    for (let j = 0; j < data.length - 1 - i; j++) {
                        // console.log(Date.parse(data[j][p]));
                        if (Date.parse(data[j][p]) > Date.parse(data[j + 1][p])) {
                            let temp = data[j];
                            data[j] = data[j + 1];
                            data[j + 1] = temp;
                        }
                    }
                }
                return data;
            }

            let getProfile = () =>{
                getprofileList().then(res =>{
                    console.log(res);
                    data.profileList = JSON.parse(JSON.stringify(res));
                    let newProfile = ReverseRankingDate(res, "update_time");
                    if (newProfile.length > 0) {
                        let personCopy = JSON.parse(JSON.stringify(newProfile[newProfile.length - 1]));
                        for (let item of newProfile) {
                            for (let key in item) {
                                if (item[key] !== null && item[key] !== "") {
                                    personCopy[key] = item[key];
                                }
                            }
                        }
                        data.person = personCopy
                    }
                })
            }
            getProfile();

            let getNoticeList = () =>{
                noticeList().then(res =>{
                    data.noticeList = res
                })
            }
            getNoticeList()

            let lookNotice = (id) =>{
                data.dialogLookNotice = true;
                data.currentNotice = data.noticeList.filter((item) => item.id == id)[0];
            }
            let lookNoticeClose = () =>{
                data.dialogLookNotice = false
            }

            let toRegister = () =>{
                let updateProfile = JSON.parse(JSON.stringify(data.profileList));
                let {id} = updateProfile[updateProfile.length - 1];
                router.push({name:'UserRegister',params:{registerId:id}})
            }

            let toUpdate = (item) =>{
                router.push({name:'UserUpdate',params:{updateId:item.id}})
            }
            return{
                toUpdate,
                toRegister,
                lookNotice,
                lookNoticeClose,
                ...toRefs(data)
            }
        }
    }
</script>

<style scoped>
    .notice_addtime{
        display: flex;
        justify-content: flex-end;
    }
    .notice{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .notice:hover{
        color: #409EFF;
        cursor: pointer;
    }
    .top-img {
        height: 260px;
        position: relative;
        overflow: hidden;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .top-img img {
        position: absolute;
        left: 0;
        top: -75%;
    }
    .bottom-content{
        margin-top: 50px;
    }
    .noticeList{
        margin-bottom: 20px;
    }
    .noticeList .card-header{
        display: flex;
        justify-content: space-between;
    }
    .profile{
        background: rgba(248, 249, 251, 1);
        border-radius: 5px;
    }
    .person p{
        color: rgba(116, 121, 140, 1);
        font-size: 12px;
        line-height: 24px;
        font-weight: 400;
    }
    .profile-title{
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }
    .profile{
        padding: 20px;
        margin-bottom: 10px;
    }
    .profile-title span{
        color: rgba(32, 37, 58, 1);
        font-size: 14px;
        font-weight: 400;
    }
    .profile div{
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
    }
    .profile .course{
        color: rgba(42, 130, 228, 1);
        font-size: 14px;
        font-weight: 400;
    }
    .profile .header{
        margin-bottom: 14px;
    }
    .profile .header .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
